<template>
	<view class="page" v-if="info.id">

		<view class="p12">
			<view class="u-flex u-f-jsb bm pb16 mb16 pt10">
				<view>
					<view class="fz16 u-font-bold">{{navTitle}}</view>
					<view class="fz12 mt6">
						<span v-if="info.status==0">超时未支付订单将自动取消</span>
						
						<span v-if="info.status==10">
							{{info.boxDeliverId?'请确认无误后签收并确认收货':'等待商家发货'}}
							</span>
							<span v-if="info.status==20">请确认无误后签收并确认收货</span>
							<span v-if="info.status==30">买家已确认收货</span>
						</view>
				</view>
				<image src="../../../static/image/ic-time.png" class="w40 h40 ml10"></image>
			</view>
			<view class="bg-white brs10 mb20 bm pb16">
				<view class="u-flex" style="align-items: stretch;" v-for="(item,index) in info.items" :key="index">
					<image
						:src="item.picUrl"
						style="width: 200rpx;" mode="widthFix"></image>
					<view class="pl12 u-f1 u-flex u-f-jsb" style="flex-direction: column;">
						<view class="fz14 u-flex u-f-jsb" style="width: 100%;">
							{{item.spuName}}
						</view>
						<view class=" u-flex u-f-jsb fz12 c9" style="width: 100%;">规格：{{item.skuName}}<span></span></view>
						<view class="fz14 u-flex u-f-jsb u-font-bold" style="width: 100%;">
							￥{{item.price}}
							<span>x{{item.count}}</span>
						</view>


					</view>
				</view>




			</view>
			<view class="bm pb16 mb16">
				<view class="fz12 mt13 u-f-jsb u-flex">
					<span class="c6">商品总价</span>
					￥{{info.totalPrice || 0}}
				</view>
				<view class="fz12 mt13 u-f-jsb u-flex">
					<span class="c6">配送费</span>
					￥{{info.deliveryPrice || 0}}
				</view>
				<view class="fz12 mt13 u-f-jsb u-flex">
					<span class="c6">优惠</span>
					￥{{info.discountPrice || 0}}
				</view>
				<view class="fz12 mt13 u-f-jsb u-flex">
					<span class="c6">备注</span>
					
				</view>
				<view class="fz12 mt13 u-f-jsb u-flex">
					<span class="c6">实付款</span>
					￥{{info.payPrice || 0}}
				</view>
			</view>
			
			<view>
				<view class="fz12 mt13 u-f-jsb u-flex">
					<span class="c6">订单编号</span>
					<view>
						<text class="copy" @click="copy(info.no)">复制</text><text>{{info.no}}</text>
					</view>
				</view>
				<view class="fz12 mt13 u-f-jsb u-flex" v-if="info.logisticsNo">
					<span class="c6">物流信息</span>
					<view>
						<text>{{info.logisticsName}}-{{info.logisticsNo}}</text>
					</view>
				</view>
				
				<view class="fz12 mt13 u-f-jsb u-flex">
					<span class="c6">收货信息</span>
					<view style="text-align: right;">
						<view>{{info.receiverName}} {{info.receiverMobile}}</view>
						<view>{{info.receiverAreaName}} {{info.receiverDetailAddress}}</view>
					</view>
				</view>
				<view class="fz12 mt13 u-f-jsb u-flex">
					<span class="c6">创建时间</span>
					{{info.createTime}}
				</view>
				<view class="fz12 mt13 u-f-jsb u-flex" v-if="info.payTime">
					<span class="c6">付款时间</span>
					{{info.payTime}}
				</view>
				<view class="fz12 mt13 u-f-jsb u-flex" v-if="info.deliveryTime">
					<span class="c6">发货时间</span>
					{{info.deliveryTime}}
				</view>
				<view class="fz12 mt13 u-f-jsb u-flex" v-if="info.receiveTime">
					<span class="c6">收货时间</span>
					{{info.receiveTime}}
				</view>
				<view class="fz12 mt13 u-f-jsb u-flex">
					<span class="c6">订单奖励</span>
					
				</view>
			</view>

		</view>




	</view>
</template>

<script>
	export default {
		data() {
			return {
				orderId:'',
				//nodetype:0:商品准备中;1:已发货;2:已揽件;3:运输中;4:派送中；5：已签收
				sysInfo:getApp().globalData.sysInfo,
				info:"",
				navTitle:"订单详情",
				logistics:{}
			}
		},
		onLoad(e) {
			// e.id=1
			this.orderId=e.id
			this.getInfo();
		},
		onShow() {
			var that=this;
			wx.getStorage({//获取地址修改
				key:'selectedAddress',
				success:function(res){
					if(res.data){
						that.info.toAddress=JSON.parse(res.data);
						wx.removeStorage({
							key:"selectedAddress"
						})
					}
					
				}
			});
			wx.getStorage({//获取优惠券
				key:'selectedCoupon',
				success:function(res){
					if(res.data){
						that.info.coupon=JSON.parse(res.data);
						wx.removeStorage({
							key:"selectedCoupon"
						})
					}	
				}
			});
		},
		computed: {},
		methods: {
			pay:function(){//立即付款
				
				
					this.$api.orderPay({
						id: this.info.payOrderId
					}, res => {
						if (res.code == 200) {
							
							
							let info=JSON.parse(res.data.displayContent)
							// 唤起微信支付。
							uni.requestPayment({
								provider: 'wxpay',
								timeStamp: info.timeStamp,
								nonceStr: info.nonceStr,
								package: info.packageValue,
								signType: info.paySign,
								paySign: info.paySign,
								success:(res)=> {
									
									uni.showToast({
										title: '支付成功',
										icon: 'none'
									})
									this.getInfo();
								},
								fail: (err)=> {
									this.getInfo();
								}
							});
							
						} else {
							this.$common.errorToShow(res.message)
						}
					})
			},
			copy:function(txt){
				wx.setClipboardData({
				  data: txt,
				  success (res) {
				    wx.showToast({
						title:"复制成功",
						icon:"none"
					})
				  }
				})
			},
			getLogistics:function(){//物流信息
				
				let data = {
					id:this.orderId,
				}
				this.$api.expressList(data, res => {
					if (res.code==200) {
						this.logistics=res.data
					} else {
						this.$common.errorToShow(res.message)
					}
				})
			},
			getInfo: function() {
				
				let that=this
				let data = {
					id:that.orderId,
				}
				that.$api.orderInfo(data, res => {
					if (res.code==200) {
						that.info=res.data
						if(that.info.logisticsNo){
							that.getLogistics();
						};
						
						
						switch (that.info.status){
							case 0:{
								that.navTitle="待付款";
								break;
							}
							case 10:{
								that.navTitle="待发货";
								break;
							}
							case 20:{
								that.navTitle="待收货";
								break;
							}
							case 30:{
								that.navTitle="已完成";
								break;
							}
							case 4:{
								that.navTitle="手动发货";
								break;
							}
							default:{
								that.navTitle="订单详情";
								break;
							}
						}
					} else {
						this.$common.errorToShow(res.message)
					}
				})
			}
		},
		mounted() {

		}
	}
</script>

<style lang="scss" scoped>
	.btn-nav {

		width: 120rpx;
		height: 50rpx;
		justify-content: center;
		text-align: center;
		color: #fff;
		background: #ABC7C9;
		border-radius: 40px;
	}

	.copy{
		padding: 5rpx 10rpx;
		background: #ededed;
		border-radius: 40rpx;
		margin-right: 20rpx;
		line-height: 30rpx;
		font-size: 20rpx;
	}
	.btn-sure {

		width: 100%;
		height: 80rpx;
		text-align: center;
		color: #fff;
		margin: 0 auto;
		line-height: 80rpx;
		background: #ABC7C9;
		border-radius: 40px;
	}

	.btn-sure1 {

		border: 1px solid #ABC7C9;
		background: #fff;
		color: #ABC7C9;
	}

	.btn {
		background: #ABC7C9;
		height: 80rpx;
		color: #fff;
		display: flex;
		align-items: center;
		justify-content: center;
		border-radius: 50rpx;
		text-align: center;
	}

	.btn1 {
		border: 1px solid #ABC7C9;
		height: 80rpx;
		color: #ABC7C9;
		display: flex;
		align-items: center;
		justify-content: center;
		border-radius: 50rpx;
		text-align: center;
	}

	.line {
		width: 750rpx;
		height: 4rpx;
		position: relative;
		top: -4rpx;
		background: #F6F9F9;
		border-radius: 0px 0px 0px 0px;
	}

	.status1 {
		color: #E54440;
	}

	.status2 {
		color: #39959B;
	}

	.status3 {
		color: #333;
	}
</style>